/**
*
* @title 基础模态框
* @description 模态框的基本使用
*
*/

import React, { Component } from 'react';
import { base } from 'nc-lightapp-front';
import moment from 'moment';
moment.locale('zh-cn');
const { NCButton, NCModal,NCDatePicker  } = base;
const Tooltip = base.NCTooltip;

class PayModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showModal: false,
      payData:'',
      hintVisible:false
    };
    this.close = this.close.bind(this);
    this.open = this.open.bind(this);
    this.confirm = this.confirm.bind(this);
  }
  
  componentWillReceiveProps(nextProps) {
    console.log('子组件nextProps:'+nextProps)
    let {isPayModal,payData} = nextProps;   
    this.setState({
      showModal:isPayModal,
      payData :payData
    });
    console.log('子组件当前支付时间'+this.state)
  }

  close() {
    this.setState({
      showModal: false
    });
  }

  confirm(){
    let paydata = this.state.payData;
    if(paydata==null || paydata==""){
      return;
    }
    this.props.onPayConfirm(paydata);
  }

  open() {
    this.setState({
      showModal: true
    });
  }
  render() {
    let { hintVisible } = this.state;
		let tip = (
			<div>
				支付日期不能为空
			</div>
		);
    return (
      <div>
        <NCModal show={this.state.showModal} onHide={this.close} size='lg'>
          <NCModal.Header >
            <NCModal.Title>导出加密文件</NCModal.Title>
          </NCModal.Header>

          <NCModal.Body>
            支付日期
            <Tooltip
              visible={hintVisible}
              placement="top"
              overlay={tip}
            >
              <NCDatePicker
                placeholder="日期选择"   
                value={this.state.payData}
                onChange={(v) => {
                    if(v!=null && v!=""){
                      this.setState({hintVisible:false});
                    }else{
                      this.setState({hintVisible:true});
                    }
                    this.setState({
                      payData: v
                    });
                }}
              />
            </Tooltip>
          </NCModal.Body>

          <NCModal.Footer>
            <NCButton onClick={this.confirm} >
              确定
            </NCButton>
            <NCButton onClick={this.close}  >
              取消
            </NCButton>
          </NCModal.Footer>
        </NCModal>
      </div>
    );
  }
}

export default PayModal;